<template>
  <div>
    <el-header>
      <div class="header">
        <div class="logo">
          <p class="Logoleft">国家调查业务技能测试系统</p>
        </div>
        <div>
          <el-dropdown class="headerdropdown" trigger="click">
            <i class="el-icon-s-custom"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="changeMajor" style="font-size: 18px;">切换专业</el-dropdown-item>
              <el-dropdown-item @click.native="AdminOuter" style="font-size: 18px;">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['0', '1']" :router=true :default-active="$route.path"
          v-for="(item, index) in adminResourceList" :key="index">
          <el-submenu :index="item.pid == '0' ? '0' : '1'">
            <template slot="title">
              <i class="el-icon-message"></i>
              {{ item.resourceName }}</template>
            <template>
              <template>
                <el-menu-item v-for="(i) in item.children" :key="i.id"
                  :index="(item.id != '1') ? `/SystemManage/${i.resourceUrl}` : `/HomePage/${i.resourceUrl}`">
                  <img :src="i.icon" :alt="i.resourceName" style="width:18px;height:20px;margin-right:5px">
                  <span slot="title">{{ i.resourceName }}</span>
                </el-menu-item>
              </template>
            </template>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main ref="mainContent" >
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<style lang="scss" scoped>
.el-menu-item:focus,
.el-menu-item:hover {
  background-color: #1c97e9;
  color: #eee;

}

.el-menu-item.is-active {
  background-color: #1c97e9;
  color: #eee;
}

// .el-menu-item:hover {
//   color: #eee;
// }

// .el-menu-item.is-active {
//   color: #eee
// }


.el-container {
  height: 89vh;
  // border: 1px solid #eee;
}

.el-header {
  background-color: #1c97e9;
  color: #79b6f7;
  line-height: 60px;
  width: 100%;
  height: 61px;
  font-size: 12px;
  padding: 0
}

.header {
  display: flex;
  justify-content: space-between;
  background-color: #f5f5f5;
  // width: 98vw;
  // margin-left: -20px;
  width: 100vw;
  border-radius: 30px 30px 0 0;

  .logo {
    display: flex;
    align-items: center;
    width: 300px;

    .Logoleft {
      line-height: 39px;
      font-size: 17px;
      font-weight: bold;
      color: #79b6f7;
      width: 100%;
      text-align: center;

      &:before {
        content: "";
        display: inline-block;
        width: 35px;
        height: 35px;
        background: url("../../public/img/logo.jpg");
        background-position: center;
        background-repeat: no-repeat;
        vertical-align: middle;
        background-size: 32px 39px;
        margin-top: -10px;
        padding-left: 15px;
      }
    }
  }
}

.headerdropdown {
  margin-right: 30px;
  color: #a9cdf3;

}

.headerdropdown :hover {
  color: #04568d;

}


.el-icon-s-custom {
  font-size: 23px;
  color: #1c97e9;
}

// .el-icon-s-custom :hover {
//   color: #1c97e9;
// }

.el-icon-caret-bottom {
  font-size: 16px;
  color: #a9cdf3;

}

// .el-icon-caret-bottom :hover {
//   color: #1c97e9;

// }

.el-dropdown {
  .triangle {
    position: absolute;
    left: 20px;
    top: 27px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-top-color: white;
  }
}


.el-menu {
  border: none;
}

.el-card__body,

.el-main {
  padding: 0px 16px !important;
  height: calc(100vh - 61px);
  overflow-y: auto;
  border-left: solid 1px #e6e6e6;

}

/* 
.el-header {
  background-color: #79b6f7;
  color: #333;
  line-height: 60px;
} */

.el-aside {
  width: 200px;
  height: calc(100vh - 61px);
  // overflow-y: auto;
  color: #333;
}
</style>
  
<script>
import {rotertable} from '@/api/login'
export default {
  data() {

    return {
      username: "",
      adminResourceList: [],
    }
  },
  methods: {
    changeMajor() {
      this.$router.push(
        '/checkmajor'
      )
    },
    scrollToTop() {
      this.$refs.mainContent.$el.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    },
    scrollToTopW() {
      this.$refs.mainContent.$el.scrollTo({
        top: 750,
        behavior: 'smooth'
      });
    },
    AdminOuter() {
      localStorage.removeItem('username');
      localStorage.removeItem('ResourceList');
      localStorage.removeItem('major');
      localStorage.removeItem('token');
      this.$router.push(
        '/'
      )
    },
    getusername() {
      this.username = localStorage.getItem('username');
    },
    jump(res) {
      this.$store.commit('setData', res)
    }
  },
  mounted() {
    rotertable().then((res)=>{
      // console.log(res.data.data);
      this.adminResourceList=res.data.data
    })
  this.getusername();
  },
};
</script>